<template>
	<view class="wrap" :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		
		<!-- 普通分享海报 -->
		<swiper :circular="true" class="swiper-wrap" @change="swiperChange" v-if="!loading" :current="currentIndex">
			<swiper-item class="swiper-items">
				<Poster1 ref="poster1" v-if="queue[0]" :app="app" :data="detail" :qrcode="qrcode_url" :userInfo="userInfo"
					:config="config" :loading="current == 0" @callbackPoster="callbackPoster"></Poster1>
			</swiper-item>
			<swiper-item class="swiper-items">
				<Poster2 ref="poster2" v-if="queue[1]" :app="app" :data="detail" :qrcode="qrcode_url" :userInfo="userInfo"
					:config="config" :loading="current == 1" @callbackPoster="callbackPoster"></Poster2>
			</swiper-item>
			<swiper-item class="swiper-items">
				<Poster3 ref="poster3" v-if="queue[2]" :app="app" :data="detail" :qrcode="qrcode_url" :userInfo="userInfo"
					:config="config" :loading="current == 2" @callbackPoster="callbackPoster"></Poster3>
			</swiper-item>
			<swiper-item class="swiper-items">
				<Poster4 ref="poster4" v-if="queue[3]" :app="app" :data="detail" :qrcode="qrcode_url" :userInfo="userInfo"
					:config="config" :loading="current == 3" @callbackPoster="callbackPoster"></Poster4>
			</swiper-item>
		</swiper>
		
		<view class="tabbar">
			<view class="btn-item" @tap="switchover(index)" v-for="(item,index) in barIcon" :key="index">
				<image :class="{'active':current == index}" :src="item.icon"
					class="icon"></image>
				<text class="btn-text">{{item.title}}</text>
			</view>
			<!-- #ifdef H5 -->
			<view class="btn-item" @tap="sharePopup">
				<text class="iconfont">&#xe67f;</text>
				<text class="btn-text">分享方式</text>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<view class="btn-item" @tap="save()">
				<text class="iconfont">&#xe636;</text>
				<text class="btn-text">保存图片</text>
			</view>
			<!-- #endif -->
		</view>
		<uni-popup ref="sharePopup" type="bottom" radius="20" class="popup-box">
			<view class="dialog">
				<view class="dialog-title">
					<text>分享方式</text>
				</view>
				<view class="dialog-content layer">
					<view class="share-item">
						<view class="share-item-title">
							<text>微信分享</text>
						</view>
						<view class="share-item-content">
							<view><text>返回内容页，点击微信右上角三个点‘···’</text></view>
							<view><text>点击【发送给朋友】或【分享至朋友圈】分享</text></view>
						</view>
					</view>
					<view class="share-item">
						<view class="share-item-title">
							<text>海报分享</text>
						</view>
						<view class="share-item-content">
							<view><text>长按上方图片，将图片保存至手机</text></view>
							<view><text>相册中选择已保存的海报，发送朋友或朋友圈</text></view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	// 普通海报
	import Poster1 from "@/common/pages/poster/components/share/1.vue";
	import Poster2 from "@/common/pages/poster/components/share/2.vue";
	import Poster3 from "@/common/pages/poster/components/share/3.vue";
	import Poster4 from "@/common/pages/poster/components/share/4.vue";
	
	export default {

		components: {
			Poster1,
			Poster2,
			Poster3,
			Poster4,
		},
		data() {
			return {
				loading: true, //加载中
				current: 0,
				urlParams: {},
				userInfo : {}, //用户数据
				detail: {},
				qrcode_url: "",
				currentIndex: 0,
				posterList: {},
				app : '',
				barIcon: this.getBarIcon(),
				queue: [false, false, false, false], //加载队列
			}
		},
		async onLoad(options) {
			await this.$onLaunched; //同步渲染
			this.urlParams = options
			this.setApp()
			this.initPage()
		},
		computed: {
			...mapState(['config'])
		},
		
		created() {
			//获取已登录用户数据
			this.getUserInfo()
		},

		methods: {
			
			/**
			 * 初始化
			 */
			initPage() {
				let that = this
				uni.setNavigationBarTitle({
				　　title: '分享海报'
				})
				Promise.all([this.createQrcode(), this.getDataDetail()]).then(res => {
					that.loading = false
					that.startDraw()
				})
			},
			
			setApp() {
				this.app = this.urlParams.m
				if(this.urlParams.m == 'muu_classroom' || 
					this.urlParams.m == 'muu_classroom_plugin_offline' ||
					this.urlParams.m == 'muu_classroom_plugin_exam' || 
					this.urlParams.m == 'muu_classroom_plugin_livecourse' || 
					this.urlParams.m == 'muu_classroom_plugin_material'
				){
					this.app = 'muu_classroom'
				}
				
				if(this.urlParams.m == 'muu_minishop'){
					this.app = 'muu_minishop'
				}
				
				if(this.urlParams.m == 'muu_scoreshop'){
					this.app = 'muu_scoreshop'
				}
				
				if(this.urlParams.m == 'muu_activity'){
					this.app = 'muu_activity'
				}
			},
			
			getDataDetail() {
				var that = this;
				let params = this.urlParams

				//#ifdef H5
				if(params.type == 'KnowledgeColumn' || params.type == 'column'){
					params.type = 'column'
				}
				if(params.type == 'ExamPaper'){
					params.type = 'paper'
				}
				if(params.type == 'Live'){
					params.type = 'live'
				}
				let url = 'entry/site/' + params.type
				let m = params.m
				//#endif
				
				//#ifdef MP
				if(params.type == 'KnowledgeColumn' || params.type == 'column'){
					params.type = 'column'
				}
				if(params.type == 'ExamPaper'){
					params.type = 'exam'
				}
				if(params.type == 'Live'){
					params.type = 'livecourse'
				}
				let url = 'entry/wxapp/' + params.type
				let m = this.app
				//#endif
				return new Promise((rej) => {
					that.util.request({
						url: url,
						data: {
							action: 'detail',
							id: that.urlParams.type_id,
							m: m
						},
						success(res) {
							
							if (res.data.code == 200) {
								that.detail = res.data.data;

								// #ifdef H5
								if (that.util.isWechat()) {
									let all_url = window.location.href;
									let all_url_arr = all_url.split('#')
									let root_url = all_url_arr[0]
									let url = root_url + '#/' + this.app + '/pages/' +params.type+ '/detail?id=' + params.type_id
									if(JSON.stringify(that.userInfo)!='{}'){
										url += '&promoter_uid=' + that.userInfo.memberInfo.uid
									}
									
									let shareData = {
										title : that.detail.title,
										desc : that.detail.description,
										img: that.detail.cover_200
									}
									that.wechat.share(shareData, url);
								}
								// #endif
							}
							rej(res);
						}
					})
				})
			},
			
			/**
			 * 获取二维码
			 */
			createQrcode() {

				let that = this;
				let params = this.urlParams
				let type = params.type
				
				return new Promise((rej) => {
					//#ifdef MP-WEIXIN
					//获取二维码
					let qrcode = this.util.url('entry/wxapp/qrcode',{
						'type': params.type,
						'type_id': params.type_id,
						'm': that.app
					})
					that.qrcode_url = qrcode
					//#endif
					
					//#ifdef H5
					if(params.type == 'KnowledgeColumn' || params.type == 'column'){
						type = 'column'
					}
					if(params.type == 'ExamPaper'){
						type = 'exam/paper'
					}
					if(params.type == 'Live'){
						type = 'live'
					}
					let all_url = window.location.href;
					let all_url_arr = all_url.split('#')
					let root_url = all_url_arr[0]

					let this_url = root_url + '#/' + this.app + '/pages/' + type + '/detail?id=' + params.type_id
					if(JSON.stringify(this.userInfo)!='{}'){
						this_url += '&promoter_uid=' + this.userInfo.memberInfo.uid
					}
					console.log('内容路径', this_url)
					this_url = encodeURIComponent(this_url)
					
					let qrcode = that.util.url('entry/site/qrcode',{
						'url': this_url, 
						'm': this.app,
					})
					
					that.qrcode_url = qrcode
					//#endif
					
					rej(true);
				})
			},
			
			urlencode (str) {  
			    str = (str + '').toString();   
			
			    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').  
			    replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');  
			},
			
			/**
			 * 切换
			 */
			switchover(index) {
				this.currentIndex = index;
			},
			swiperChange(e) {
				this.current = e.detail.current;
				this.startDraw()
			},
			/**
			 * 生成回调
			 * @param {Object} data
			 */
			callbackPoster(data) {
				this.posterList[data.current] = data.src;
			},
			/**
			 * 生成海报
			 */
			startDraw(redraw = false) {
				let num = this.current
				if (!this.queue[num]) {
					this.queue[num] = true;
				}
				
				console.log('poster' + (num + 1))
				this.$nextTick(function() {
					this.$refs['poster' + (num + 1)].draw(redraw);
				})
			},
			/**
			 * 分享引导
			 */
			sharePopup() {
				this.$refs.sharePopup.open();
			},
			/**
			 * 保存
			 */
			save() {
				if (!this.posterList[this.current]) {
					uni.showToast({
						title: '海报生成中，请耐心等候',
						icon: 'none'
					})
					return '';
				}
				uni.showLoading()
				uni.saveImageToPhotosAlbum({
					filePath: this.posterList[this.current],
					success: function() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						});
						uni.hideLoading()
					},
					fail: function() {
						uni.showToast({
							title: "保存失败",
							icon: "none"
						});
						uni.hideLoading()
					}
				});
			},
			
			getBarIcon() {
				let bar = [{
						title: '常规',
						icon: this.util.rootUrl() + '/addons/muu_classroom/resource/images/share/bar-1.png'
					},
					{
						title: '简约',
						icon: this.util.rootUrl() + '/addons/muu_classroom/resource/images/share/bar-2.png'
					},
					{
						title: '科幻',
						icon: this.util.rootUrl() + '/addons/muu_classroom/resource/images/share/bar-3.png'
					},
					{
						title: '卡通',
						icon: this.util.rootUrl() + '/addons/muu_classroom/resource/images/share/bar-4.png'
					},
				];
				
				return bar;
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo() {
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100vw;
		height: 100vh;
		position: relative;

		.switch-poster {
			position: absolute;
			top: 34rpx;
			right: 0;
			height: 66rpx;
			line-height: 66rpx;
			padding-left: 26rpx;
			padding-right: 12rpx;
			color: #FFFFFF;
			border-radius: 33rpx 0 0 33rpx;
			background-color: rgba(0, 0, 0, 0.5);
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 1px;
			z-index: 4;

			.iconfont {
				margin-right: 8rpx;
				font-size: 32rpx;
				vertical-align: -1px;
			}
		}

		.swiper-wrap {
			width: 100%;
			height: 100%;

			.swiper-items {
				width: 100%;
				height: 100%;
			}
		}

		.tabbar {
			position: fixed;
			bottom: 0;
			z-index: 10;
			background-color: #FFFFFF;
			display: flex;
			width: 100vw;
			height: 194rpx;
			border-top: 1px solid #FAFAFA;

			.btn-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 30rpx;

				.icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 20rpx;
					box-sizing: border-box;
				}

				.active {
					border: 2px solid;
				}

				.btn-text {
					padding-top: 24rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #777777;
					line-height: 20rpx;
				}

				.iconfont {
					padding-top: 12rpx;
					font-size: 50rpx;
				}
			}
		}
	}

	.dialog {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;

		.dialog-title {
			padding: 20rpx 0;
			font-size: 38rpx;
			font-weight: 500;
			color: #222222;
			text-align: center;
			border-bottom: 1px solid #F5F5F5;
		}

		.dialog-content {
			.share-item {
				padding: 20rpx 0;

				.share-item-title {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
				}

				.share-item-content {
					font-size: 28rpx;
					font-weight: 400;
					color: #555555;
					padding-top: 20rpx;
				}
			}
		}
	}
</style>
